<template>
  <q-dialog class="lc-dialog" ref="el" v-bind="{...presetConfig[preset].dialogProps, ...dialogProps}" @hide='component = null'>
    <PresetDialogCard v-bind="{...presetConfig[preset].cardProps, ...cardProps}" :title="title" :readonly="readonly">
      <template #default>
        <slot name="default">
          <component ref="contentRef" v-if="component" :is="component" v-bind="contentProps"></component>
        </slot>
      </template>
      <template #footer>
        <div v-if="btns?.length" class="fit row justify-end items-center q-px-1 q-gutter-x-sm">
          <template v-for="btn in btns">
            <q-btn v-if="btn.type === 'submit'" label="确认" color="primary" v-bind="btn" class="footer-btn" type="submit" @click="submit()"></q-btn>
            <q-btn v-else-if="btn.type === 'cancel'" label="取消" v-bind="btn" class="footer-btn" v-close-popup></q-btn>
            <q-btn v-else color="primary" v-bind="btn" class="footer-btn" @click="submit(btn.eventName)"></q-btn>
          </template>
        </div>
        <div v-else class="fit row justify-end items-center q-px-1 q-gutter-x-sm">
          <q-btn label="确认" color="primary" class="footer-btn" type="submit" @click="submit()"></q-btn>
          <q-btn label="取消" class="footer-btn" v-close-popup></q-btn>
        </div>
      </template>
    </PresetDialogCard>
  </q-dialog>
</template>

<script setup>
import PresetDialogCard from './PresetDialogCard.vue';
import presetConfig from './preset.config'
import {ref} from "vue"
const emits = defineEmits(['ok'])
const props = defineProps({
  data: Object,
  title: String,
  readonly: Boolean,
  path: String,
  component: Object,
  btns: Array,
  query: Object,
  cardProps: Object,
  dialogProps: Object,
  contentProps: Object,
  preset: {
    type: String,
    default: 'default'
  },
})

const contentRef = ref()
async function submit(eventName = 'submit') {
  let srcElement = props.srcElement
  eventName = eventName.charAt(0).toUpperCase() + eventName.slice(1)
  const argument = {
    name: eventName,
    contentRef: contentRef.value
  }
  srcElement?.value.$attrs[`on` + eventName](argument)
  emits('ok', argument)
}
</script>

<style scoped lang="scss">

</style>
